<template>
	<view class="flow flex_c">
		<view class="blance flex_c">
			<text class="text">邀请1名用户送<i>500</i>次曝光</text>
			<view class="fire flex_r_around">
				<view class="flex_center">
					<view class="text">已获得</view>
					<view class="num flex_center">
						<image src="/static/store/flow_fire.png"></image>
						<text>{{all}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="code_content flex_c">
			<text class="code_title">我的邀请码</text>
			<text class="code_sn">{{user.sn}}</text>

			<view class="btn_box flex_r_between">
				<view @click="onCopy(`www.xiyu.cc/pages/invite/invite?pid=${user.id}`)">复制邀请链接</view>
				<view @click="onCopy(`${user.sn}`)">复制邀请链码</view>
			</view>
		</view>

		<view class="table" v-if="list.length">
			<view class="header">我的邀请</view>
			<view class="flex_center widget">
				<text>时间</text>
				<text>昵称</text>
				<text>奖励流量</text>
			</view>
			<view class="flex_center" v-for="(item,index) in list" :key="index">
				<text>{{item.create_time}}</text>
				<text>{{item.nickname}}</text>
				<text>{{item.change_price}}</text>
			</view>
		</view>

		<view class="pagination" v-if="total != 0">
			<page-pagination :total="total" mode="multi" color="#FD2A53" @change="change"></page-pagination>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				page: 1,
				total: 0,
				list: [],
				all: '0',
			}
		},
		methods: {
			// 获取商家中心邀请记录
			getStoreShareList() {
				this.$post('/user_share/getStoreShareList', {
					page: this.page,
				}).then(res => {
					this.total = res.data.list.total;
					this.list = res.data.list.data;
					this.all = res.data.total;
				})
			},
			
			refresh(){
				this.page = 1;
				this.$post('/user_share/getStoreShareList', {
					page: this.page,
				}).then(res => {
					this.total = res.data.list.total;
					this.list = res.data.list.data;
					this.all = res.data.total;
					uni.stopPullDownRefresh();
				})
			},

			change(currentPage, type) { // 当前页改变
				this.page.currentPage = currentPage;
				this.getStoreShareList();
			},
			
			onCopy(str){
				uni.setClipboardData({
					data: str,
					showToast:false,
					success: res => {
						this.$util.msg('已复制到剪贴板')
					}
				});
			},
		},

		created() {
			this.user = uni.getStorageSync('user');
			this.getStoreShareList();
		}
	}
</script>

<style lang="less" scoped>
	.flow {
		min-height: 100vh;
		background: url('https://qiniu-cdn.maeiyun.com//h5static/store/flow_bg.png') 0 0 no-repeat;
		background-size: 100%;
		padding-top: 480rpx;
	}

	.blance {
		width: 696rpx;
		height: 280rpx;
		background: linear-gradient(180deg, #FFF2F2 0%, #F9E8DF 100%);
		border-radius: 32rpx;
		border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(252, 206, 180, 1)) 2 2;
		backdrop-filter: blur(8px);

		.text {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			margin: 46rpx 0 40rpx;

			i {
				color: #FB2545;
				font-style: normal;
			}
		}

		.fire {
			width: 512rpx;
			height: 104rpx;
			background: linear-gradient(90deg, #FC2B48 0%, #FC8055 100%);
			box-shadow: 0rpx 10rpx 8rpx 0rpx rgba(252, 45, 73, 0.18);
			border-radius: 52rpx;

			.text {
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
				padding: 0 16rpx;
			}

			.num {
				image {
					width: 40rpx;
					height: 52rpx;
					margin-right: 12rpx;
				}

				text {
					font-family: Arial, Arial;
					font-weight: normal;
					font-size: 60rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.code_content {
		width: 696rpx;
		height: 480rpx;
		background: linear-gradient(169deg, #FCE8E6 0%, #FFFFFF 100%);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		backdrop-filter: blur(8px);
		margin: 20rpx 0;

		.code_title {
			font-family: Arial, Arial;
			font-weight: 600;
			font-size: 60rpx;
			color: #333;
			margin-top: 60rpx;
		}

		.code_sn {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			margin: 30rpx 0 60rpx;
		}

		.btn_box {
			width: 540rpx;

			view {
				width: 248rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 48rpx;
				border: 2rpx solid #FD2A53;
				font-size: 28rpx;
				color: #FD2A53;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}

	.table {
		width: 696rpx;
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		overflow: hidden;
		background-color: #FFF;
		margin-bottom: 60rpx;

		.header {
			height: 80rpx;
			background: linear-gradient(180deg, #FFF2F2 0%, #F9E8DF 100%);
			backdrop-filter: blur(8px);
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 80rpx;
			text-align: center;
		}

		view {
			text {
				flex: 1;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				color: #333333;
				text-align: center;
				border: 2rpx solid #FAEDE7;
			}


		}

		.widget {
			text {
				font-weight: 600;
			}
		}
	}
</style>